<template>
  <div class="container">
    <van-nav-bar
        :title="yearQuestions.yearName"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
    />

    <div class="content">
      <div class="question-title">选择题</div>
      <div class="question">
        {{options.questionContent}}
      </div>
<!--        <van-radio :name="option.label" v-for="(option, index) in ['A', 'B', 'C', 'D']" :key="index">-->
<!--&lt;!&ndash;          {{ option }}. {{ options[index].value }}&ndash;&gt;-->
<!--        </van-radio>-->
      <van-form @submit="onSubmit">
        <van-radio-group v-model="checked">
          <van-radio name="A">{{options.optionA}}</van-radio>
          <van-radio name="B">{{options.optionB}}</van-radio>
          <van-radio name="C">{{options.optionC}}</van-radio>
          <van-radio name="D">{{options.optionD}}</van-radio>
        </van-radio-group>
        <div style="display: flex; justify-content: space-around;">
          <van-button round block type="primary" @click="onLike">
            收藏
          </van-button>
          <van-button round block type="success" native-type="submit">
            提交
          </van-button>
        </div>
      </van-form>
    </div>
    <div class="footer">
      <van-icon name="refresh" size="24" />
      <van-icon name="arrow-right" size="24" />
    </div>
  </div>
</template>

<script setup>
import {useRoute} from "vue-router";
const router = useRoute();
const id = router.params.id;

import {onMounted, ref} from 'vue';
import {get, post} from "../../util/request.js";
import {showToast} from "vant";
const onClickLeft = () => history.back();
const checked = ref('A')
const selection=ref('')
const options = ref({})


const items = ref([])
const yearQuestions = ref({})
onMounted(async ()=>{
  get('home/exam/searchExam').then( r=>{
    if (r.code == 0){ // 获取成功
      // alert("查询成功")
      options.value= r.data;
    }else {
      showToast("查询失败")
      // 加载状态结束
    }
  }).catch(function (){
    alert("全部异常")
  });

})

const onSubmit = () => {
  post('home/exam/searchYearQuestion',{
    questionId:options.value.id,
    checked:checked.value
  }).then( r=>{
    if (r.code == 0){ // 获取成功
      // alert("查询成功")
      showToast("回答正确")
      window.location.reload();
    }else {
      showToast("回答错误，已加入错题本")
      window.location.reload();
    }
  }).catch(function (){
    alert("全部异常")
  });
}

const onLike = () => {
  post('home/question/addCollectsQuestion',{
    questionId:options.value.id,
    checked:checked.value
  }).then( r=>{
    if (r.code == 0){ // 获取成功
      // alert("查询成功")
      showToast("收藏正确,已加入收藏夹")
    }else {
      showToast("收藏失败")
    }
  }).catch(function (){
    alert("全部异常")
  });
}
</script>

<style>
.container {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.title {
  font-size: 18px;
  font-weight: bold;
}

.time {
  display: flex;
  align-items: center;
  padding: 10px 20px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.actions {
  display: flex;
  justify-content: space-around;
  padding: 10px 20px;
  background-color: #fff;
  border-bottom: 1px solid #eee;
}

.content {
  flex: 1;
  padding: 20px;
  background-color: #fff;
}

.question-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.question {
  font-size: 14px;
  margin-bottom: 20px;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  background-color: #fff;
  border-top: 1px solid #eee;
}
</style>